<template>
  <div class="footer">
    <van-tabbar
      v-model="active"
      route
    >
      <van-tabbar-item
        v-for="(item, index) in itemList"
        :key="index"
        :icon="item.icon"
        :to="item.path"
      >
        {{ item.label }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()


const active = ref(0)

const itemList = [
  { label: '首页', icon: 'home-o', path: '/index' },
  { label: '记录', icon: 'search', path: '/record' },
  { label: '公告', icon: 'envelop-o', path: '/notice' },
  { label: '当前', icon: 'friends-o', path: '/status' },
  { label: '我的', icon: 'setting-o', path: '/my' }
]

// 初始化时同步状态
watchEffect(() => {
  active.value = itemList.findIndex(item =>
    route.path.startsWith(item.path) ||
      route.name === item.path.replace('/', ''))
})
</script>

<style scoped>
/* 底部导航*/
.footer {
  height: 60px;
}
</style>